<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>视频播放</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/listree.min.css" />
    <script src="/script/listree.umd.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //获取数据
            $.ajax({
                type: "GET",
                url: "/getData",
                success: function (data) {
                    // 对返回的数据进行处理，显示列表
                    var t = "";
                    for(var i=0;i<data.length;i++){
                        t+=create(data[i]);
                    }
                    $("#menu").append(t);
                    listree();
                }
            });
        });
        function create(node){
            var temp = "<li>"
            if(node.list === null){
                temp+= "<a href='#' onclick='playVideo(this.id)' id='"+node.url+"'>"+node.text+"</a>";
            }else{
                temp += "<div class='listree-submenu-heading'>"+node.text+"</div>";
                temp += "<ul class='listree-submenu-items'>";
                for(var i=0;i<node.list.length;i++){
                    temp+=create(node.list[i]);
                }
                temp += "</ul>";
            }
            temp += "</li>";
            return temp;
        }
        function playVideo(url){
            $('#vs').attr('src',url);
            // 获取 video 元素
            var video = $('#my-video')[0];
            // 重新加载视频
            video.load();
            // 播放视频
            video.play();
        }
    </script>
    <style>
        body {
            height: 100vh;
            background-color: #fafafa;
        }
        .container {
            width: 100%;
            height:98%;
            overflow:auto;
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 98%;">
    <!--菜单栏-->
    <div style="width: 30%;height:100%;padding-top:10px;padding-left:10px;float: left">
        <b style="padding-left:10px;">视频列表</b>
        <div class="container">
            <ul class="listree" id="menu" style="padding-left: 0px;">
            </ul>
        </div>
    </div>
    <!--视频播放-->
    <div style="width: 69%;height:97%;float: left;display: flex;justify-content: center;align-items: center;">
        <video width="100%" controls autoplay id="my-video">
            <source type="video/mp4" id="vs">
        </video>
    </div>
</div>
</body>
</html>